<template>
  <view>
    <up-card class="card-wrapper">
      <template #head>
        <view class="u-header-item u-flex u-row-between">
          <view @click="copyText(data.trade.tradeNo)">
            <text class="u-m-l-10">{{ data.trade.tradeNo }}</text>
            <uni-icons
              class="u-m-l-15"
              custom-prefix="iconfont"
              type="icon-copy"
              size="16"
              :color="$u.color.warning"
            ></uni-icons>
          </view>
        </view>
      </template>
      <template #body>
        <view @click="toOrder">
          <view class="u-m-b-20">
            <goods-item
              :data="item"
              :type="'horizontal'"
              :size="'168rpx'"
              v-for="(item, index) in data.goods" :key="index"
            ></goods-item>
          </view>

          <view class="u-m-t-20">
            <u-row justify="space-between">
              <view>
                <u-text :text="'订单支付价格'" :color="$u.color.tipsColor" />
              </view>
              <view>
                <u-text :text="'¥' + data.trade.totalPrice" :color="$u.color.warning" />
              </view>
            </u-row>
          </view>
          <view class="u-m-t-10">
            <u-row justify="space-between">
              <view>
                <u-text :text="'最终确认价格'" :color="$u.color.tipsColor" />
              </view>
              <view v-if="data.trade.finalPrice || data.trade.finalPrice === 0">
                <u-text :text="'¥' + data.trade.finalPrice" :color="$u.color.warning" />
              </view>
              <view v-else>
                <u-text :text="'待商家确认'" :color="$u.color.warning" />
              </view>
            </u-row>
          </view>
        </view>
      </template>
      <template #foot>
        <view class="u-p-l-20 u-p-r-20 u-p-t-20 u-p-b-20">
          <up-row type="flex" justify="space-between">
            <!-- // 订单过滤状态 (0:已取消 10:待付款 20:待发货 30:待自提 40:待收货 50:已收货 60:待评价 70:已完成 80:售后中) -->
            <up-row type="flex">
              <text> </text>
              <view v-if="data.trade.status.value == 10">
                <up-text text="待付款" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 20">
                <up-text text="待发货" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 30">
                <up-text text="待提货" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 40">
                <up-text text="待确认收货" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 70">
                <up-text text="已完成" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 0">
                <up-text text="已取消" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 80">
                <up-text text="申诉中" type="warning"></up-text>
              </view>
              <view v-if="data.trade.status.value == 90">
                <up-text text="售后完成" type="warning"></up-text>
              </view>
            </up-row>
            <up-row type="flex" justify="flex-end">
              <!-- || data.trade.status.value == 20 || data.trade.status.value == 30 -->
              <view  v-if="data.trade.status.value == 10">
                <up-button type="info" size="small" @click="orderCancel(data.trade)">取消</up-button>
              </view>
              <view class="u-m-l-10" v-if="data.trade.status.value == 10">
                <up-button type="primary" size="small" plain @click="toPay">去付款</up-button>
              </view>
              <view class="u-m-l-10" v-if="data.trade.status.value == 40">
                <up-button type="primary" size="small" plain @click="toAfterSale">退换货</up-button>
              </view>
              <view class="u-m-l-10" v-if="data.trade.status.value == 40">
                <up-button type="primary" size="small" plain @click="finishOrder">确认收货</up-button>
              </view>
            </up-row>
          </up-row>
        </view>
      </template>
    </up-card>
  </view>
</template>

<script>
export default {
  props: ['data', 'title'],
  data() {
    return {
      itemStyle: {
        width: '200rpx',
        height: '100rpx'
      }
    }
  },
  methods: {
    copyText(str) {
      console.log(str)
      uni.setClipboardData({
        data: str,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          })
        }
      });
    },
    orderCancel(item) {
      uni.showModal({
        title: '提示',
        content: '确定取消订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.$api.order.cancel({
              id: item.id
            }).then(res => {
              uni.showToast({
                title: '取消成功',
              })
              this.$emit('reset')
            })
          }
        }
      })
    },
    toOrder() {
      if (this.data.trade.status.value == 10) {
        this.toPay()
      } else if(this.data.trade.status.value == 80) {
        uni.navigateTo({ url: '/pages/after-sale/after-sale?id=' + this.data.trade.id })
      } else {
        uni.navigateTo({ url: '/pages/create-order/create-order?id=' + this.data.trade.id + '&type=info' })
      }
    },
    toPay() {
      uni.navigateTo({ url: '/pages/create-order/create-order?id=' + this.data.trade.id + '&type=pay' })
    },
    toAfterSale() {
      uni.navigateTo({
        url: '/pages/create-order/create-order?id=' + this.data.trade.id + '&type=afterSale'
      })
    },
    finishOrder() {
      uni.showModal({
        title: '提示',
        content: '确定完成订单吗？',
        showCancel: true,
        success: async ({ confirm, cancel }) => {
          if (cancel) return
          const {code} = await this.$api.order.confirm({
            "id": this.data.trade.id
          })

          if (code == 200) {
            uni.showModal({
              title: '提示',
              content: '订单已完成',
              showCancel: false,
              success: (res) => {
                this.$emit('reset')
              }
            })
          } else {
            uni.showToast({
              title: '操作失败',
              icon: 'none'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.u-header-item {
  padding: 16rpx 20rpx;
  background: $u-main-color;
  color: $u-light-color;
  position: relative;

  &::after {
    position: absolute;
    content: "";
    left: -1px;
    top: -1px;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: 1px solid $u-main-color;
    box-sizing: content-box;
    pointer-events: none;
  }
}
</style>